<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM事件</title>
    <style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
        }
        #canvas{
            height: 500px;
        }
        li{
            float: left;
            width: 100px;
            height: 30px;
            border-radius: 10px;
            background: #333;
            text-align: center;
            line-height: 30px;
            color: white;
        }
        ul li:nth-child(1){
            background: red;
        }
        ul li:nth-child(2){
             background: black;
         }
        ul li:nth-child(3){
            background: blue;
        }
        ul li:nth-child(4){
            background: yellow;
        }
        ul li:nth-child(5){
            background: green;
        }

    </style>
</head>
<body>
    <div id="canvas">
        <ul id="ul">
            <li>红色</li>
            <li>黑色</li>
            <li>蓝色</li>
            <li>黄色</li>
            <li>绿色</li>
        </ul>
        <script type="text/javascript">
            var ul=document.getElementById('ul');
            var canvas=document.getElementById('canvas')
            ul.addEventListener('click',function (e) {
                var that = e.target;
                if(that.innerHTML == "红色"){
                    canvas.style.background = 'red';
                }else if(that.innerHTML == "黑色") {
                    canvas.style.background = 'black';
                }else if (that.innerHTML == "蓝色"){
                    canvas.style.background = 'blue';
                }else if(that.innerHTML == "黄色"){
                    canvas.style.background = 'yellow';
                }else if(that.innerHTML == "绿色"){
                    canvas.style.background = 'green';
                }
            })
        </script>
    </div>
</body>
</html>